<template>
	<view class="menu-box">
		<view class="menu-line" v-if="lines&&lines.length>0">
			<view class="line-item" :class="{current:currentLine.id===item.id}" v-for="(item,lineIndex) in lines"
				@click="clickLine(item,lineIndex)">
				<text class="margin-right-xs">{{item.menu_name}}</text><text class="cuIcon-right"
					v-if="lineIndex!==lines.length-1"></text>
			</view>
		</view>
		<view class="menu-item" v-for="menu in lists" @click="clickMenu(menu)">
			<view class="icon shadow-blur bg-blue" v-if="menu.menu_name">
				<view class="text" v-for="text in menu.menu_name.slice(0,4).split('')">
					{{text}}
				</view>
			</view>
			<view class="menu-name">
				{{menu.menu_name}}
			</view>
			<!-- <view class="menu-child" v-if=" menu._childNode&& menu._childNode.length>0">
				<menu-item :list="menu._childNode"></menu-item>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		name: "menu-item",
		props: {
			list: {
				type: Array
			},
			app: {
				type: Object
			}
		},
		watch: {
			list: {
				deep: true,
				immediate: true,
				handler(newValue, oldValue) {
					if (Array.isArray(newValue)) {
						this.lists = this.deepClone(newValue)
						this.lines = []
					}
				}
			}
		},
		data() {
			return {
				currentLine: {},
				lists: [],
				lines: [],
			}
		},
		methods: {
			clickLine(e, index) {
				this.lines = this.lines.slice(0, index)
				if (index > 0) {
					this.currentLine = e
					this.lists = this.lines[index - 1]['_childNode']
				} else {
					if (this.list.length > 0) {
						this.currentLine = this.lists[0]
					}
					this.lists = this.deepClone(this.list)
				}
			},
			clickMenu(e) {
				console.log(e.is_leaf)
				if (e.is_leaf === '是' && e.service_name && this.app?.name && (e?.app_dest_page === "procList" || (e && e
						.menu_url && e.menu_url.indexOf('listproc') !== -1))) {
					// if (e?.app_dest_page === "procList" || (e && e.menu_url && e.menu_url.indexOf('listproc') !== -1)) {
					uni.navigateTo({
						url: "/pages/public/proc/procList/procList?destApp=" + this.app.name +
							"&serviceName=" + e
							.service_name
					})
					// }
				} else if (e.is_leaf === '是' && e.menu_url && e.menu_url.indexOf('/list/') !== -1) {
					let serviceName = e.menu_url.split('/list/')[1]
					if (serviceName) {
						serviceName = serviceName.split('?')[0]
						uni.navigateTo({
							url: `/pages/public/list/list?pageType=list&serviceName=` + serviceName
						});
					}
				} else if (e.is_leaf === '是' && e.menu_url && e.menu_url.indexOf('/treegrid/') !== -1) {
					let serviceName = e.menu_url.split('/treegrid/')[1]
					console.log(serviceName)
					// 树形表格
					// uni.showToast({
					// 	title:'相关页面正在开发中...',
					// 	icon:'none'
					// })
					// return
					if (serviceName) {
						serviceName = serviceName.split('?')[0]
						console.log(serviceName)
						uni.navigateTo({
							url: `/pages/public/treeList/treeList?pageType=list&serviceName=` + serviceName
						});
					}
				} else if (e._childNode.length === 0 && e.service_name) {
					uni.navigateTo({
						url: '/pages/public/list/list?pageType=list&serviceName=' + e.service_name
					});
				} else {
					let current = this.currentLine
					if (Array.isArray(e._childNode) && e._childNode.length > 0) {
						this.lists = e._childNode || []
					} else {
						this.lists = []
					}
					if (e.parent_no && current.parent_no === e.parent_no) {
						this.lines.splice(this.lines.length - 1, 1, e)
					} else if (!e.parent_no) {
						this.lines = [e]
					} else if (!this.lines.find(item => item.id === e.id)) {
						this.lines.push(e)
					}
					this.currentLine = e
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.menu-box {
		display: flex;
		flex-wrap: wrap;

		.menu-line {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			margin: 0 20rpx 20rpx;
			box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
			border-radius: 10rpx;
			padding: 20rpx;

			.line-item {
				margin-left: 10rpx;
				padding-bottom: 10rpx;

				&.current {
					position: relative;
					transition: all 1s;

					&::after {
						position: absolute;
						bottom: 0;
						left: 20%;
						content: '';
						width: 60%;
						height: 2px;
						background-color: #0081FF;
					}

					// border-bottom: 2px solid #0081FF;
				}
			}

		}
	}

	.menu-item {
		width: 25%;
		padding: 10rpx;
		margin-bottom: 5rpx;

		// border-bottom: 1rpx solid #F0F0F0;
		&:last-child {
			border-bottom: none;
		}

		.icon {
			margin: auto;
			padding: 15rpx;
			width: 120rpx;
			height: 120rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			border-radius: 20rpx;

			// background: #1488CC;  /* fallback for old browsers */
			.image {
				width: 100%;
				height: 100%;
			}

			.text {
				// font-weight: bold;
				font-size: 32rpx;
				width: 50%;
				text-align: center;
			}
		}

		.menu-name {
			padding: 10rpx;
			text-align: center;
		}
	}
</style>
